<template>
  <div id="app">
    <router-view/>
    <theme-picker/>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import { Message } from 'element-ui';
import router from '@/router';
import { resetRouter } from '@/router';
import {MessageTypes} from "@/utils/websocket/websocket";

export default {
  name: "App",
  components: {ThemePicker},
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  created() {
    // 只监听refresh_role类型的消息
    this.$websocket.on(MessageTypes.REFRESH_ROLE, this.handleNewTypeMessage);
  },
  methods: {
    handleNewTypeMessage(content) {
      console.log("接收到刷新角色权限消息：", content);

      try {
        // 解析消息内容
        let permData;
        if (typeof content === 'string') {
          permData = JSON.parse(content);
        } else {
          permData = content;
        }

        // 检查消息格式是否正确
        if (!permData || (!permData.permissions && !permData.roleKey)) {
          console.error('接收到的权限数据格式不正确:', permData);
          return;
        }

        // 更新权限信息
        if (permData.permissions && Array.isArray(permData.permissions)) {
          // 更新Vuex状态
          this.$store.commit('SET_PERMISSIONS', permData.permissions);
          // 更新sessionStorage (与登录逻辑保持一致)
          sessionStorage.setItem('permissions', JSON.stringify(permData.permissions));
          console.log('已更新用户权限列表, 权限数量:', permData.permissions.length);
        }

        // 更新角色信息
        if (permData.roleKey) {
          const roles = Array.isArray(permData.roleKey) ? permData.roleKey : [permData.roleKey];
          // 更新Vuex状态
          this.$store.commit('SET_ROLES', roles);
          // 更新sessionStorage (与登录逻辑保持一致)
          sessionStorage.setItem('roles', JSON.stringify(roles));
          console.log('已更新用户角色:', roles);
        }

        // 刷新路由权限
        this.refreshRoutes();

        // 显示主要成功提示
        Message({
          message: '审核通过，您的权限已更新，部分功能可能需要刷新页面或者重新登录才能生效',
          type: 'success',
          duration: 5000
        });
      } catch (error) {
        console.error('处理权限更新消息时出错:', error);
        // 同样处理错误提示
        Message.error('处理权限更新消息时出错，请刷新页面');
      }
    },

    // 刷新路由权限
    refreshRoutes() {
      // 先清理路由
      resetRouter();

      // 重新生成路由
      this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
        // 添加新路由
        router.addRoutes(accessRoutes);

        // 清除组件缓存
        this.$store.dispatch('tagsView/delAllCachedViews').then(() => {
          // 刷新当前页面的权限按钮
          this.$forceUpdate();
          console.log('路由权限和组件缓存已刷新');

          // 提示用户重新登录
          this.$nextTick(() => {
            this.$confirm(
              '您的账号权限已更新，需要重新登录以应用所有更改',
              '权限更新提示',
              {
                confirmButtonText: '立即登录',
                cancelButtonText: '稍后登录',
                closeOnClickModal: false,
                type: 'warning'
              }
            ).then(() => {
              // 用户选择立即登录
              this.logout();
            }).catch(() => {
              // 用户选择稍后登录，只显示提示
              Message({
                message: '请尽快重新登录以获得完整权限',
                type: 'warning',
                duration: 5000
              });
            });
          });
        });
      }).catch(err => {
        console.error('刷新路由权限失败:', err);
        Message.error('权限更新失败，请重新登录');
      });
    },

    // 退出登录方法
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        // 清除相关数据
        sessionStorage.clear();
        localStorage.clear();

        // 跳转到登录页
        Message.success('请使用新权限重新登录');
        setTimeout(() => {
          window.location.href = '/login';
        }, 1500);
      }).catch(error => {
        console.error('登出失败:', error);
        // 如果登出接口失败，强制清除缓存并跳转
        sessionStorage.clear();
        localStorage.clear();
        window.location.href = '/login';
      });
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
